<template>
  <div class="page-container">
    <div class="home-container">
      <el-row :gutter="20">
        <el-col :span="8" v-for="card in cards" :key="card.title">
          <el-card class="stat-card" shadow="hover">
            <div class="card-content">
              <el-icon class="icon" :size="40">
                <component :is="card.icon" />
              </el-icon>
              <div class="info">
                <div class="value">{{ card.value }}</div>
                <div class="title">{{ card.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="mt-4">
        <el-col :span="16">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>访问统计</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button :value="'week'">本周</el-radio-button>
                  <el-radio-button :value="'month'">本月</el-radio-button>
                  <el-radio-button :value="'year'">全年</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container" @click="fileDialogVisible = !fileDialogVisible">
              <!-- 这里可以添加图表组件 -->
              <div class="placeholder-chart"  >图表区域</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="quick-nav">
            <template #header>
              <div class="card-header">
                <span>快捷导航</span>
              </div>
            </template>
            <div class="nav-list">
              <el-button 
                v-for="nav in quickNavs" 
                :key="nav.title"
                :type="nav.type"
                class="nav-item"
                @click="handleNavClick(nav)"
              >
                <el-icon><component :is="nav.icon" /></el-icon>
                {{ nav.title }}
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <FileDialog v-model="fileDialogVisible" :multiple="false" @select="handleSelect"  />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User, 
  VideoCamera, 
  Document, 
  Setting,
  Key,
  Lock
} from '@element-plus/icons-vue'
import FileDialog from '@/components/FileDialog/index.vue'
const fileDialogVisible = ref(false)
const handleSelect = (files: any) => {
  console.log(files)
}
const router = useRouter()
const timeRange = ref('week')

const cards = [
  {
    title: '在线用户',
    value: '254',
    icon: User,
    color: '#409EFF'
  },
  {
    title: '直播房间',
    value: '12',
    icon: VideoCamera,
    color: '#67C23A'
  },
  {
    title: '工单总数',
    value: '89',
    icon: Document,
    color: '#E6A23C'
  }
]

const quickNavs = [
  {
    title: '用户管理',
    icon: User,
    path: '/system/user',
    type: 'primary'
  },
  {
    title: '角色管理',
    icon: Key,
    path: '/system/role',
    type: 'success'
  },
  {
    title: '权限管理',
    icon: Lock,
    path: '/system/permission',
    type: 'warning'
  },
  {
    title: '系统设置',
    icon: Setting,
    path: '/system/setting',
    type: 'info'
  }
]

const handleNavClick = (nav: any) => {
  router.push(nav.path)
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
}

.home-container {
  padding: $spacing-base;

  .stat-card {
    .card-content {
      display: flex;
      align-items: center;
      padding: $spacing-base;

      .icon {
        margin-right: $spacing-large;
        font-size: 48px;
        color: var(--primary-color);
      }

      .info {
        .value {
          font-size: $font-size-huge;
          font-weight: $font-weight-bold;
          color: var(--text-color-primary);
          margin-bottom: $spacing-mini;
        }

        .title {
          font-size: $font-size-base;
          color: var(--info-color);
        }
      }
    }
  }

  .chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chart-container {
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary-light-9);
      border-radius: $border-radius-base;
      color: var(--primary-color);
    }
  }

  .quick-nav {
    height: 100%;

    .nav-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-base;

      .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-small;
      }
    }
  }
}

.mt-4 {
  margin-top: $spacing-large;
}
</style>
